<template>
  <ContainerContent
    :loading="loading"
    :pagination="pagination"
    :show-pagination="false"
    :refresh="false"
    @run="run">
    <template #header-prefix>
      <div class="mb-6">
        <div class="rule-title">缓存规则</div>
        <div class="rule-subtitle">
          添加站点时默认使用的规则（已添加站点不受影响）
        </div>
      </div>
      <a-divider margin="0" type="dashed" />
    </template>
    <template #header>
      <a-button type="primary" @click="AddRule()">
        <i-icons-btn-add />
        新增规则
      </a-button>
    </template>
    <div class="w-60% min-w-600px">
      <a-table
        ref="tableRef"
        v-bind="commonTableProps"
        :columns="columns"
        :data="data"
        class="w-full">
        <template #cache_time="{ record }">
          {{ TimeUnitConversion(record.cache_time) }}
        </template>
        <template #action="{ record, rowIndex }">
          <a-link :hoverable="false" @click="handleConfig(record, rowIndex)"
            >编辑</a-link
          >
          <a-link
            status="danger"
            :hoverable="false"
            class="ml-6"
            @click="handleDelete(rowIndex)"
            >删除</a-link
          >
        </template>
      </a-table>
    </div>

    <AppRuleModel
      v-if="visible"
      v-model:visible="visible"
      :record="RuleRecord"
      @reload="run"
      :index="EditIndex"></AppRuleModel>
  </ContainerContent>
</template>
<script lang="ts" setup>
import {
  getApiPresetCacheRule,
  updateApiPresetCacheRule
} from '@/apis/modules/resolve/rule'
import ContainerContent from '@/components/ContentContainer.vue'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import { useListRequest } from '@/hooks/useListRequest'
import { commonTableProps } from '@/utils/table'
import useTableColumn from './column'
import AppRuleModel from './components/AppRuleModel.vue'
const { visible, data: RuleRecord } = usePopup()
const queryParams = ref<CloudFilterBarState>({})
const { columns, TimeUnitConversion } = useTableColumn()
const { data, loading, run, pagination } = useListRequest(
  getApiPresetCacheRule,
  {
    params: queryParams,
    immediate: true
  }
)

const EditIndex = ref(-1)
//新增
const AddRule = () => {
  visible.value = true
  EditIndex.value = -1
}
//编辑
const handleConfig = (record: any, index: number) => {
  visible.value = true
  RuleRecord.value = record
  EditIndex.value = index
}
//删除
const handleDelete = (index: number) => {
  data.value.splice(index, 1)
  updateApiPresetCacheRule({ list: data.value }).then(() => {
    ToastUtils.success('操作成功')
    run()
  })
  // setMessageBox({
  //   icon: true,
  //   content: `该操作会删除此规则，确认继续？`,
  //   title: '操作确认',
  //   btnStatus: 'danger',
  //   submit() {
  //     // try {
  //     // 	await renewSelfCaApi({ id: row.id } as any);
  //     // 	ToastUtils.success("操作成功");
  //     // 	getInfo();
  //     // 	// emit("refresh");
  //     setMessageBox({ visible: false })
  //     ToastUtils.success('操作成功')
  //     // } finally {
  //     setMessageBox({ loading: false })
  //     // }
  //   },
  //   cancel() {
  //     setMessageBox({ visible: false })
  //   }
  // })
}
</script>

<style lang="less" scoped>
.rule-title {
  color: var(---color-text-1, #1d2129);

  /* 🥈🥈🥈 粗体丨Semibold 700/标题 - 中 */
  font-family: 'Microsoft YaHei UI';
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px; /* 157.143% */
}
.rule-subtitle {
  color: var(----2color-text-5, #a6adb8);

  /* 🥇🥇🥇 常规丨Regular 400/辅助文案、次要文案 */
  font-family: 'Microsoft YaHei UI';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 166.667% */
}
</style>
